<template  >
<div style="background:#f8f8f8;overflow:hidden">
  <div class="detail">
  
    <div class="banner" style="position:relative">
       <Carousel autoplay  loop >
        <CarouselItem v-for="item in imgList" :key="item.id">
            <div class="demo-carousel">
            <img :src="item" alt="">
            </div>
        </CarouselItem>
        
       
    </Carousel>
     <span class="title">{{cityDetail.sceneryTitle}}</span>
    </div>
    <div class="introduce">
      <p>
          {{cityDetail.sceneryTitle}}
      </p>  

      <ul>
          <li>
              <b>同程价:</b><span>¥1757</span>
          </li>
          <li>
              <div>
                  景点介绍
              </div>
              <p>
                {{cityDetail.sceneryIntroduce}} 
              </p>
          </li>


           <li>
              <div>
                  景点路线
              </div>
              <p>
               {{cityDetail.sceneryRoute}}
              </p>
          </li>
      </ul>


    </div>
  </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            imgList:[],
          id:this.$route.query.id,
          cityDetail:{}
        }
    },
    created(){
    this.getDetail(this.id)
    },
    methods:{
   getDetail(id){
    this.$axios.get('/findById?id='+id)
    .then(res=>{
      this.imgList=res.data.sceneryImgs.split(",");
      this.cityDetail=res.data;
      console.log(this.cityDetail)
    })
    .catch(err=>{

    })
   }
    }
};
</script>
<style lang="scss" scoped>
.detail{
    height:400px;
    width:1000px;
    margin:20px auto;
    padding:20px;
    border:1px solid #ccc;
}
.banner{
float:left;
  height:100%;
  background-color: #ddd;
  width:50%;
  img{
      width:100%;
      height:360px;
  }
  .title{
     color:#fff;
     font-size:20px;
     position:absolute;
     bottom:20px;
     z-index:99
  }
}
.introduce{
    float:right;
   // background-color: #eee;
    height:100%;
    width:48%;
    p{
        font-size:18px;
        color:#333;
    }
    li:nth-child(1){
        list-style: none;
        width:100%;
        height:80px;
        border-bottom: 1px dashed #ccc;
        background-color: #fcf9ea;
        line-height: 80px;
      span{
          color: orange;
          font-size:24px;
          margin-left:10px;
         

      }
    }
    li{
        list-style: none
    }
 li{
     div{
         margin-top:5px;
     width:100px;
    line-height:30px;
    background-color:#4abdcc;
    color:#fff;
    text-align: center;
 font-size:15px;
 font-weight: 200;
 border-radius: 20px;
     }
     p{
         background-color: #fff;
         font-size:13px;
         font-weight: 100;
         color:#333;
         margin-top:10px;
     }
 }
    
}
</style>
